import React, { useState, useEffect } from 'react'
import $axios from '../../utils/axios'
import ReactEcharts from "echarts-for-react"
import { Progress } from 'antd';
export default function Home() {
  interface INumberData {
    total: number
    signCount: number
    serviceCount: number
    finishService: number
  }
  interface IEchartsData {
    resident: [any],
    service: [any],
    sign: [any]
  }
  interface IToDealt {
    sign: number,
    service: number,
    fService: number
  }
  interface IResLab {
    count: number,
    id: string,
    name: string
  }
  interface IResHea {
    residentId: String
    bloodSugar: number
    createTime: String
    id: String
    name: String
    gender: number
    picture: String
    birthday: String
    title: String
    age: number
  }
  interface IResidentHealth {
    BS:IResHea,
    BP:IResHea,
    HR:IResHea
  }
  const [numberData, setColumn] = useState<INumberData>()
  const [echartsData, setEchartsData] = useState<IEchartsData>()
  const [toDealt, setToDealt] = useState<IToDealt>({
    sign: 0,
    service: 0,
    fService: 0
  })
  
  const [residentLabel, setResidentLabel] = useState<IResLab[]>([])
  const [labelNum, setLabelNum] = useState(0)
  const [residentHealth, setResidentHealth] = useState<IResidentHealth>()
  const [weekData,setWeekData] = useState<any>()
  const [weekDataTrD,setWeekDataTrD] = useState<any>()
  const getResidentNum = () => {
    $axios({
      url: '/api/getSTRSRSDSDed',
      method: 'post',
    }).then(res => {
      setColumn(res.data)
    })
  }
  useEffect(() => {
    getResidentNum()
    getSRSSByMonths()
    getToDealt()
    getResidentLabel()
    getResidentHealth()
    getThisWeekSign()
  }, [])
  const getSRSSByMonths = () => {
    $axios({
      url: '/api/getSRSSByMonths',
      method: 'post',
      data: {
        months: 7
      }
    }).then(res => {
      setEchartsData(res.data)
    })
  }
  const getOption = () => {
    let option = {
      title: {
        text: '数据概况'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['居民数量', '签约量', '服务量']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: echartsData?.resident.map(i => i[0])
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '居民数量',
          type: 'line',
          stack: '居民数量',
          data: echartsData?.resident.map(i => i[1]),
          itemStyle: {
            normal: {
              color: '#2984F8',
              linStyle: {
                color: '#2984F8'
              }
            }
          }
        },
        {
          name: '签约量',
          type: 'line',
          stack: '签约量',
          data: echartsData?.service.map(i => i[1])
        },
        {
          name: '服务量',
          type: 'line',
          stack: '服务量',
          data: echartsData?.sign.map(i => i[1])
        },
      ]
    };
    return option
  };
  const getToDealt = () => {
    $axios({
      url: '/api/getToDealt',
      method: 'post',
      data: ''
    }).then(res => {
      setToDealt(res.data)
    })
  }
  const getResidentLabel = () => {
    $axios({
      url: '/api/getResidentLabelStatistics',
      method: 'post',
      data: ''
    }).then(res => {
      setResidentLabel(res.data)
      console.log(res.data)
    })
  }
  useEffect(() => {
    getLabelNum()
  }, [residentLabel])
  const getLabelNum = () => {
    let num = 0
    for (let a = 0; a < residentLabel.length; a++) {
      num += residentLabel[a].count
    }
    setLabelNum(num)
  }
  const getPercent = (num: number) => {
    return (num / labelNum * 100)
  }
  const getResidentHealth = () => {
    $axios({
      url: '/api/getResidentHealth',
      method: 'post',
      data: ''
    }).then(res => {
      setResidentHealth(res.data)
      console.log(res.data)
    })
  }
  const getThisWeekSign=()=>{
    $axios({
      url:'/api/getThisWeekSign',
      method:'post',
      data:''
    }).then(res=>{
      setWeekData(res.data)
      console.log(res.data)
      weekDataTr()
    })
  }
  const weekDataTr =()=>{
    let a = []
    for(let i in weekData){
      let b= {name:'',data:''}
      b.name = i,
      b.data = weekData[i]
      a.push(b)
    }
    setWeekDataTrD(a)
    console.log(a)
    
  }
  return (
    <div style={{ width: '1400px', margin: '0 auto' }}>
      <h3>早上好！Daisy</h3>
      <ul style={{ listStyle: 'none', width: '900px', display: 'flex', marginTop: '30px', }}>
        <li style={{ display: 'flex', padding: '20px', backgroundColor: '#fff', marginRight: '30px', borderRadius: '5px' }}>
          <div style={{
            width: '50px',
            height: '50px',
            textAlign: 'center', lineHeight: '50px',
            borderRadius: '50%',
            backgroundColor: '#2984F8',
            boxShadow: '#2984F8 0px 1px 2px 1px'
          }}><img style={{}} src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1268.png" alt="" /></div>
          <div style={{ margin: '5px 20px' }}><span style={{ color: '#999999', marginBottom: '10px' }}>居民总数量</span>
            <h3 style={{ fontSize: '30px', letterSpacing: '2px', color: '#2984F8', marginTop: '10px', width: '120px' }}>{numberData?.total}</h3></div>
        </li>
        <li style={{ display: 'flex', padding: '20px', backgroundColor: '#fff', marginRight: '30px', borderRadius: '5px' }}>
          <div style={{
            width: '50px',
            height: '50px',
            textAlign: 'center', lineHeight: '50px',
            borderRadius: '50%',
            backgroundColor: '#28D094',
            boxShadow: '#28D094 0px 1px 2px 1px'
          }}><img style={{}} src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1249.png" alt="" /></div>
          <div style={{ margin: '5px 20px' }}><span style={{ color: '#999999', marginBottom: '10px' }}>签约居民数量</span>
            <h3 style={{ fontSize: '30px', letterSpacing: '2px', color: '#28D094', marginTop: '10px', width: '120px' }}>{numberData?.signCount}</h3></div>
        </li>
        <li style={{ display: 'flex', padding: '20px', backgroundColor: '#fff', marginRight: '30px', borderRadius: '5px' }}>
          <div style={{
            width: '50px',
            height: '50px',
            textAlign: 'center', lineHeight: '50px',
            borderRadius: '50%',
            backgroundColor: '#FFC71C',
            boxShadow: '#FFC71C 0px 1px 2px 1px'
          }}><img style={{}} src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1256.png" alt="" /></div>
          <div style={{ margin: '5px 20px' }}><span style={{ color: '#999999', marginBottom: '10px' }}>待处理服务量</span>
            <h3 style={{ fontSize: '30px', letterSpacing: '2px', color: '#FFC71C', marginTop: '10px', width: '120px' }}>{numberData?.serviceCount}</h3></div>
        </li>
        <li style={{ display: 'flex', padding: '20px', backgroundColor: '#fff', marginRight: '30px', borderRadius: '5px' }}>
          <div style={{
            width: '50px',
            height: '50px',
            textAlign: 'center', lineHeight: '50px',
            borderRadius: '50%',
            backgroundColor: '#FF6262',
            boxShadow: '#FF6262 0px 1px 2px 1px'
          }}><img style={{}} src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1262.png" alt="" /></div>
          <div style={{ margin: '5px 20px' }}><span style={{ color: '#999999', marginBottom: '10px' }}>已完成服务</span>
            <h3 style={{ fontSize: '30px', letterSpacing: '2px', color: '#FF6262', marginTop: '10px', width: '120px' }}>{numberData?.finishService}</h3></div>
        </li>
      </ul>
      <div style={{ display: 'flex' }}>
        <ReactEcharts option={getOption()} style={{ width: '810px', height: '400px', backgroundColor: '#fff', padding: '24px', marginLeft: '40px', borderRadius: '10px' }} />
        <div style={{ width: '250px', height: '400px', marginLeft: '30px', backgroundColor: '#fff', borderRadius: '5px' }}>
          <ul style={{ listStyle: 'none', padding: '10px', boxSizing: 'border-box' }}>
            <li style={{ height: '50px', lineHeight: '50px', width: '100%', borderBottom: '1px #f1f1f1 solid' }}><h3>待办提醒</h3></li>
            {toDealt.sign > 0 && <li style={{ padding: '10px 0px', borderBottom: '1px #f1f1f1 solid', position: 'relative' }}>
              <p style={{ fontSize: '18px' }}>{toDealt?.sign}</p>
              <h3 style={{ fontSize: '13px', color: '#999999' }}>待审核签约申请</h3>
              <div style={{ width: '8px', height: '8px', borderRadius: '50%', position: "absolute", right: '0', bottom: '30px', backgroundColor: '#FA746B' }}></div>
            </li>}
            {toDealt.service > 0 && <li style={{ padding: '10px 0px', borderBottom: '1px #f1f1f1 solid', position: 'relative' }}>
              <p style={{ fontSize: '18px' }}>{toDealt.service}</p>
              <h3 style={{ fontSize: '13px', color: '#999999' }}>待审核服务申请</h3>
              <div style={{ width: '8px', height: '8px', borderRadius: '50%', position: "absolute", right: '0', bottom: '30px', backgroundColor: '#FA746B' }}></div>
            </li>}
            {toDealt.fService > 0 && <li style={{ padding: '10px 0px', borderBottom: '1px #f1f1f1 solid', position: 'relative' }}>
              <p style={{ fontSize: '18px' }}>{toDealt.fService}</p>
              <h3 style={{ fontSize: '13px', color: '#999999' }}>待完成服务</h3>
              <div style={{ width: '8px', height: '8px', borderRadius: '50%', position: "absolute", right: '0', bottom: '30px', backgroundColor: '#FA746B' }}></div>
            </li>}
          </ul>
        </div>
      </div>
      <div style={{ display: 'flex' }}>
        <div style={{ backgroundColor: '#fff', marginLeft: '40px', width: '400px', marginTop: '20px', borderRadius: '10px' }}>
          <div style={{ width: '100%', padding: '20px', boxSizing: 'border-box' }}>
            <h3>居民标签</h3>
            <br />
            {residentLabel.map((i) => {
              return (
                <div key={i.id}>
                  <div style={{ width: '90%', display: 'flex', justifyContent: "space-between" }}><span>{i.name}</span> <b>{i.count}</b></div>
                  <Progress percent={getPercent(i.count)} showInfo={false} />
                </div>
              )
            })}
          </div>
        </div>
        <div style={{ width: '670px', padding: '15px', borderRadius: '10px', height: '360px', marginTop: '20px', marginLeft: '20px', backgroundColor: '#fff' }}>
          <div style={{ width: '94%', display: 'flex', justifyContent: "space-between" }}><h3>居民指标异常</h3> <span style={{ color: '#9A9A9A', fontSize: '14px', marginTop: '2px' }}>查看全部</span></div>
          <ul style={{ listStyle: 'none', marginTop: '20px', display: 'flex', justifyContent: 'space-between', padding: '0' }}>
            <li>
              <a>
                <div style={{ width: '200px', textAlign: 'center', height: '280px', backgroundColor: '#ffffff', borderRadius: '10px', border: '1px solid #F2F2F2', boxShadow: ' 0px 0px 5px 3px #f1f1f1' }}>
                  <img style={{ marginTop: '30px',width:'84px',height:'84px',borderRadius:'50%' }} src={"http://127.0.0.1:3000/"+residentHealth?.BS.picture} alt="" />
                  <div style={{ margin: '10px 0' }}> <span style={{ fontSize: '24px', color: 'black' }}>{residentHealth?.BS.name}</span> <b style={{ fontWeight: 'normal', color: '#999999' }}>{residentHealth?.BS.age }岁</b> <img style={{ width: '7px', height: '10px', marginLeft: '6px', transform: 'rotate(-45deg)' }} src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1152.png" alt="" /> </div>
                  <div> <img src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/error_u1155.png" alt="" /> <span>{residentHealth?.BS.title}</span></div>
                  <button style={{ width: '120px', height: '36px', border: 'none', backgroundColor: "#2984F8", color: '#fff', borderRadius: '3px', marginTop: '15px' }}>查看详情</button>
                </div>
              </a>
            </li>
            <li>
            <a>
                <div style={{ width: '200px', textAlign: 'center', height: '280px', backgroundColor: '#ffffff', borderRadius: '10px', border: '1px solid #F2F2F2', boxShadow: ' 0px 0px 5px 3px #f1f1f1' }}>
                  <img style={{ marginTop: '30px',width:'84px',height:'84px',borderRadius:'50%' }} src={"http://127.0.0.1:3000/"+residentHealth?.BP.picture} alt="" />
                  <div style={{ margin: '10px 0' }}> <span style={{ fontSize: '24px', color: 'black' }}>{residentHealth?.BP.name}</span> <b style={{ fontWeight: 'normal', color: '#999999' }}>{residentHealth?.BP.age }岁</b> <img style={{ width: '7px', height: '10px', marginLeft: '6px', transform: 'rotate(-45deg)' }} src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1152.png" alt="" /> </div>
                  <div> <img src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/error_u1155.png" alt="" /> <span>{residentHealth?.BP.title}</span></div>
                  <button style={{ width: '120px', height: '36px', border: 'none', backgroundColor: "#2984F8", color: '#fff', borderRadius: '3px', marginTop: '15px' }}>查看详情</button>
                </div>
              </a>
            </li>
            <li>
            <a>
                <div style={{ width: '200px', textAlign: 'center', height: '280px', backgroundColor: '#ffffff', borderRadius: '10px', border: '1px solid #F2F2F2', boxShadow: ' 0px 0px 5px 3px #f1f1f1' }}>
                  <img style={{ marginTop: '30px',width:'84px',height:'84px',borderRadius:'50%' }} src={"http://127.0.0.1:3000/"+residentHealth?.HR.picture} alt="" />
                  <div style={{ margin: '10px 0' }}> <span style={{ fontSize: '24px', color: 'black' }}>{residentHealth?.HR.name}</span> <b style={{ fontWeight: 'normal', color: '#999999' }}>{residentHealth?.HR.age }岁</b> <img style={{ width: '7px', height: '10px', marginLeft: '6px', transform: 'rotate(-45deg)' }} src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1152.png" alt="" /> </div>
                  <div> <img src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/error_u1155.png" alt="" /> <span>{residentHealth?.HR.title}</span></div>
                  <button style={{ width: '120px', height: '36px', border: 'none', backgroundColor: "#2984F8", color: '#fff', borderRadius: '3px', marginTop: '15px' }}>查看详情</button>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div style={{width:'1100px',borderRadius:'5px',padding:'20px',boxSizing:'border-box', marginLeft:"40px",backgroundColor:'#fff',marginTop:'20px'}}>
        <h3>本周签约概况</h3>
        <table style={{width:'100%'}}>
          
        </table>
      </div>
    </div>
  )
}
